<template>
    <div class="">
        <div class="menu-box fl">

            <div class="menu">
                <ul>
                    <li>
                        <div class="fl icon-box background-purple">
                            <i class="iconfont icon-xiezuoqun"></i>
                        </div>
                        <div class="fl text-box">
                            <p class="title">我加入的团队</p>
                            <p class="content">{{joinGroupList.length}}个群组</p>
                        </div>

                    </li>
                    <li>
                        <div class="fl icon-box background-yellow">
                            <i class="iconfont icon-xiezuoqun"></i>
                        </div>
                        <div class="fl text-box">
                            <p class="title">我创建的团队</p>
                            <p class="content">{{createdGroup}}个群组</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content-box">
            <button class="add-group-button forbid-drag">
                <i class="iconfont icon-xiezuoqun"></i>
                <span>创建团队</span>
            </button>

            <button class="add-group-button forbid-drag" @click="createDepartment()">
                <i class="iconfont icon-xiezuoqun"></i>
                <span>创建部门</span>
            </button>
        </div>
    </div>
</template>

<script>

  export default {
    name: "group",
    data() {
      return {
        createdGroup:1,
        joinGroupList:1,
        currentCompanyId:''

      }
    },
    created(){
    },
    mounted(){
      this.getCompanyList()
    },
    methods: {
      createDepartment:function(){
        this.$http.post('/organization/company/dept/' + this.currentCompanyId,{names:['研发部']}).then(function (data) {
          if(data.data.code === 1){
           console.log(data)
          }
        })
      },
      getCompanyDepartment:function(){
        this.$http.get('/organization/company/dept/' + this.currentCompanyId).then(function (data) {
          if(data.data.code === 1){
            console.log(data)
          }
        })
      },
      getCompanyList:function () {
        const that = this
        let userInfo = this.$store.state.User.userInfo
        this.$http.get('/organization/company/app/user/' + userInfo.userId ).then(function (data) {
          if(data.data.code === 1){
            that.joinGroupList =data.data.data.companies
            that.currentCompanyId = data.data.data.mainCompanyId
            console.log('--------------------')
            that.getCompanyDepartment()
          }
        })
      }
    }
  }
</script>

<style scoped lang="css" src="@/assets/css/content-menu.css"></style>
<style scoped>
    .menu {
        margin-top: 30px;
    }

    .menu ul li {
        cursor: pointer;
        height: 60px;
        padding: 10px 25px;
        box-sizing: border-box;
    }

    .menu ul li:hover {
        background: #dcdeea;
    }

    .menu ul .menu-active {
        background: #dcdeea;
    }

    .menu ul li .icon-box {
        height: 40px;
        width: 40px;
        border-radius: 40px;
        line-height: 40px;
        text-align: center;
        color:#fffeff;
    }

    .menu ul li .text-box{
        margin-left: 20px;
    }

    .menu ul li .text-box .title{
        font-size: 15px;
        line-height: 20px;
    }

    .menu ul li .text-box .content{
        font-size: 13px;
        line-height: 20px;
    }

    .background-purple {
        background: #7d76ff;
    }

    .background-yellow {
        background: #ffbe17;
    }

    .add-group-button{
        border: none;
        width: 115px;
        height: 30px;
        background: #143ded;
        border-radius: 3px;
        color: white;
        font-size: 14px;
        margin: 22px 38px;
    }
</style>
